<template>
  <div class="components-input-demo-presuffix" v-if="avalid">
    <!---->
    <a-input @click="openModal" placeholder="请选择" v-model="showText" readonly :disabled="disabled">
      <a-icon slot="prefix" type="cluster" title="弹窗选择控件" />
      <a-icon
        v-if="showText && !disabled"
        slot="suffix"
        type="close-circle"
        @click="handleEmpty"
        :disabled="disabled"
        title="清空"
      />
    </a-input>
    <popup-modal
      ref="innerSelectModal"
      :modal-width="modalWidth"
      :multi="multi"
      :url="url"
      :rootOpened="rootOpened"
      :fieldName="fieldName"
      :field="field"
      :groupId="uniqGroupId"
      @ok="callBack"
    />
  </div>
</template>

<script>
import PopupModal from "./modal/HYPopupModalNoReport";
export default {
  name: "HYPopupNoReport",
  components: {
    PopupModal
  },
  props: {
    //code: { type: String, default: '', required: false },
    field: {
      type: String,
      default: "",
      required: false
    },
    fieldName: { type: String, default: "", required: false },
    orgFields: {
      type: String,
      default: "",
      required: false
    },
    triggerChange: {
      type: Boolean,
      required: false,
      default: false,
    },
    destFields: {
      type: String,
      default: "",
      required: false
    },
    modalWidth: {
      type: Number,
      default: 1200,
      required: false
    },
    url: {
      type: Object,
      required: true,
      default: () => {}
    },
    multi: {
      type: Boolean,
      default: false,
      required: false
    },
    rootOpened: {
      type: Boolean,
      default: true,
      required: false
    },
    value: {
      type: String,
      required: false
    },
    disabled: {
      type: Boolean,
      required: false,
      default: false
    },
    // 自定义返回字段，默认返回 id
    customReturnField: {
      type: String,
      default: "id"
    }
  },
  data() {
    return {
      visible: false,
      confirmLoading: false,
      avalid: true,
      showText: "",
      title: ""
      // inputName:"",
      // departIds:''
    };
  },
  mounted() {
    //this.departIds = this.value
    if (!this.orgFields || !this.destFields) {
      this.$message.error("popup参数未正确配置!");
      this.avalid = false;
    }
    if (this.destFields.split(",").length != this.orgFields.split(",").length) {
      this.$message.error("popup参数未正确配置,原始值和目标值数量不一致!");
      this.avalid = false;
    }
  },
  computed: {
    uniqGroupId() {
      if (this.groupId) {
        let { groupId, code, field, orgFields, destFields } = this;
        return `${groupId}_${code}_${field}_${orgFields}_${destFields}`;
      }
    }
  },
  watch: {
    value: {
      immediate: true,
      handler: function(val) {
        console.log(this.field);
        if (!val) {
          this.showText = "";
        } else {
          this.showText = val;
        }
      }
    }
  },
  methods: {
    // initComp(inputName){
    //   this.inputName = inputName
    // },
    openModal() {
      if (this.disabled === false) {
        this.$refs.innerSelectModal.show();
      }
    },
    // handleOK(rows, idstr) {
    //   let value = ''
    //   let value2 = ''
    //   if (!rows && rows.length <= 0) {
    //     this.inputName = ''
    //     this.departIds = ''
    //   } else {
    //     //alert(row[this.customReturnField])
    //   console.log(rows)
    //     value = rows.map((row) => { return row[this.customReturnField]}).join(',')
    //     this.inputName = rows.map((row) => { return row[this.customReturnField]}).join(',')
    //     this.departIds = idstr
    //   }
    //   //alert(value)
    //   this.$emit("callback", rows)
    //   this.$emit("change", value)
    // },
    // getinputName(){
    //   return this.inputName
    // },
    handleEmpty() {
      // this.handleOK('')
      this.showText = "";
      let destFieldsArr = this.destFields.split(",");
      if (destFieldsArr.length === 0) {
        return;
      }
      let res = {};
      for (let i = 0; i < destFieldsArr.length; i++) {
        res[destFieldsArr[i]] = "";
      }
      if (this.triggerChange) {
        this.$emit("callback", res);
      } else {
        this.$emit("input", "", res);
      }
    },
    callBack(rows) {
      // update--begin--autor:lvdandan-----date:20200630------for：多选时未带回多个值------
      let selection = rows;
      let orgFieldsArr = this.orgFields.split(",");
      let destFieldsArr = this.destFields.split(",");
      let resetText = false;
      if (this.field && this.field.length > 0) {
        this.showText = "";
        resetText = true;
      }
      let res = {};
      if (orgFieldsArr.length > 0) {
        for (let i = 0; i < orgFieldsArr.length; i++) {
          let tempDestArr = [];
          for (let rw of rows) {
            let val = rw[orgFieldsArr[i]];
            if (!val) {
              val = "";
            }
            tempDestArr.push(val);
          }
          res[destFieldsArr[i]] = tempDestArr.join(",");
        }
        if (resetText === true) {
          let tempText = [];
          for (let rw of rows) {
            let val = rw[orgFieldsArr[destFieldsArr.indexOf(this.field)]];
            if (!val) {
              val = "";
            }
            tempText.push(val);
          }
          debugger;
          this.showText = tempText.join(",");
          //alert(this.showText);
        }
        // update--end--autor:lvdandan-----date:20200630------for：多选时未带回多个值------
      }
      if (this.triggerChange) {
        //v-dec时即triggerChange为true时 将整个对象给form页面 让他自己setFieldsValue
        //alert(2);
        this.$emit("callback", res);
        //this.$emit("change", this.showText);
      } else {
        //v-model时 需要传一个参数field 表示当前这个字段 从而根据这个字段的顺序找到原始值
        // this.$emit("input",row[orgFieldsArr[destFieldsArr.indexOf(this.field)]])
        this.$emit("input", this.showText, res, selection);
      }
    }
  },
  model: {
      prop: "value",
      event: "change"
  }
};
//组件已经成型
</script>

<style scoped>
.components-input-demo-presuffix .anticon-close-circle {
  cursor: pointer;
  color: #ccc;
  transition: color 0.3s;
  font-size: 12px;
}
.components-input-demo-presuffix .anticon-close-circle:hover {
  color: #f5222d;
}
.components-input-demo-presuffix .anticon-close-circle:active {
  color: #666;
}
</style>